@charset "UTF-8";
//-----------------------------------------------------	
// attention seekers scss
//-----------------------------------------------------


//bounce
@mixin animate-bounce () {
  @include keyframes(bounce){
    0%, 20%, 50%, 80%, 100% {
      @include translateY(0);
    }

    40% {
      @include translateY(-30px);
    }

    60% {
      @include translateY(-15px);
    }  
  }
  .bounce {
    @include animation-name(bounce);
    @extend %animated;
  }
}

// flash
@mixin animate-flash () {
  @include keyframes(flash){
    0%, 50%, 100% {
      opacity: 1;
    }

    25%, 75% {
      opacity: 0;
    }  
  }
  .flash {
    @include animation-name(flash);
    @extend %animated;
  }
}

// pulse
@mixin animate-pulse () {
  @include keyframes(pulse){
    0% {
      @include scale(1);
    }
    50% {
      @include scale(1.1);
    }
    100% {
      @include scale(1);
    }
  }
  .pulse {
    @include animation-name(pulse);
    @extend %animated;
  }
}

// shake
@mixin animate-shake () {
  @include keyframes(shake){
    0%,100%{
      @include translateX(0);
    }
    10%,30%,50%,70%,90%{
      @include translateX(-10px);
    }
    20%,40%,60%,80%{
      @include translateX(10px);
    }
  }
  .shake {
    @include animation-name(shake);
    @extend %animated;
  }
}

// swing
@mixin animate-swing () {
  @include keyframes(swing){
    20% {
      @include rotate(15deg);
    }
    40%{
      @include rotate(-10deg);
    }
    60% {
      @include rotate(5deg);
    }
    80% {
      @include rotate(-5deg);
    }
    100% {
      @include rotate(0deg);
    }
  }
  .swing {
    @include transform-origin(top center);
    @include animation-name(swing);
    @extend %animated;
  }
}

// tada
@mixin animate-tada () {
  @include keyframes(tada){
    0% {
      @include scale(1);
    }
    10%,20% {
      @include transform(scale(.9) rotate(-3deg));
    }
    30%,50%,70%,90%{
      @include transform(scale(1.1) rotate(3deg));
    }
    40%,60%,80%{
      @include transform(scale(1.1) rotate(-3deg));
    }
    100%{
      @include transform(scale(1) rotate(0));
    }
  }
  .tada {
    @include animation-name(tada);
    @extend %animated;
  }
}

// wobble
@mixin animate-wobble () {
  @include keyframes(wobble){
    0% {
      @include translateX(0%);
    }
    15% {
      @include transform(translateX(-25%) rotate(-5deg));
    }
    30% {
      @include transform(translateX(20%) rotate(3deg));
    }
    45% {
      @include transform(translateX(-15%) rotate(-3deg));
    }
    60% {
      @include transform(translateX(10%) rotate(2deg));
    }
    75% {
      @include transform(translateX(-5%) rotate(-1deg));
    }
    100% {
      @include translateX(0%);
    }
  }
  .wobble {
    @include animation-name(wobble);
    @extend %animated;
  }
}